<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户登录</title>
    <link rel="stylesheet" href="./css/bootstrap.css" />
    <link rel="stylesheet" href="./css/login.css" />
</head>

<body>
    <div class="login-box">
        <div class="form-group">
            <label for="username">Account</label>
            <!-- 账号 -->
            <input type="text" class="form-control" id="username" autocomplete="off" />
            <small id="emailHelp" class="form-text text-muted">The available account is <strong>admin</strong></small>
        </div>
        <div class="form-group">
            <!-- 密码 -->
            <label for="password">Password</label>
            <input type="password" class="form-control" id="password" />
            <small id="emailHelp" class="form-text text-muted">The available password is <strong>123456</strong></small>
        </div>
        <button type="submit" class="btn btn-primary" id="btnLogin">Submit</button>
    </div>

    <script src="./lib/axios.js"></script>

    <script>
        // 请求方式 POST
        // 地址 http://www.liulongbin.top:3009/api/login
        // 参数:  username 用户名     password  密码
        // 注意事项: username 为 admin , password 为 123456 可登录成功

        // 步骤
        // - 给 submit 按钮注册 click 事件
        // - 获取用户数据
        // - 通过 ajax 提交用户数据
        // - 判断请求是否成功，并给出不同的提示

        document.querySelector('#btnLogin').addEventListener('click', function () {
            let username = document.querySelector('#username').value
            let password = document.querySelector('#password').value

            axios({
                method: 'post',
                url: 'http://ajax-api.itheima.net/api/login',
                data: {
                    username,
                    password,
                },
            }).then((res) => {
                console.log(res)
                alert('登录成功了')
            }).catch(() => {
                alert('登录失败了')
            })
        })
    </script>
</body>

</html>